<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>生命周期(新)</title>
</head>
<body>
<div id="container">

</div>
</body>
</html>


<!--引入react核心库-->
<script type="text/javascript" src="../JsNew/react.development.js"></script>
<!--引入react-dom库,用于支持react操作dom-->
<script type="text/javascript" src="../JsNew/react-dom.development.js"></script>
<!--引入babel库,用于将jsx转成js-->
<script type="text/javascript" src="../JsNew/babel.min.js"></script>
<!--引入prop-types库,用于将对props进行类型限制-->
<script type="text/javascript" src="../JsNew/prop-types.js"></script>

<script type="text/babel">//此处一定要写text/babel，将jsx转成js
class Count extends React.Component{
/*
1.初始化阶段:由ReactDom.render()触发---初次渲染
1.constructor()
getDerivedstateFromProps
2.
3.
render()
componentDidMount()
2.更新阶段:由组件内部this.setsate()或父组件重新render触发
getDerivedstateFromprops
shouldcomponentUpdate()
3.
render()
getsnapshotBeforeUpdate
componentDidUpdate()
3.卸载组件:由ReactDoM.unmountcomponentAtNode()触发
1.
componentWillUnmount()
 */

    constructor(props) {
        super(props);
        console.log("Count---constructor")
        this.state={
            sum:0
        }
    }


    static getDerivedStateFromProps(props,state){
        console.log("Count---getDerivedStateFromProps")
        return props
    }


    // 更新前获取一次快照
    getSnapshotBeforeUpdate(){
        console.log("Count---getSnapshotBeforeUpdate")
        return "hello"
    }


    componentDidUpdate(preProps,preState,snapShot){
     console.log("Count---componentDidUpdate")
        console.log(preProps,preState,snapShot)
    }

    add=()=>{
        let {sum}=this.state
        sum+=1
        this.setState({
            sum
        })

    }




    death=()=>{
        ReactDOM.unmountComponentAtNode(document.getElementById("container"))
    }

    force=()=>{
        // 强制更新的生命周期,跳过shouldComponentUpdate阀门
        this.forceUpdate()
    }

    // 渲染
    render(){
        console.log("Count---render")
        return (
            <div>
                <h1>{this.state.sum}</h1>
                <button onClick={this.add}>点我+1</button>
                <button onClick={this.death}>卸载组件</button>
                <button onClick={this.force}>不修改数据，强制更新组件</button>
            </div>
        )
    }
}

ReactDOM.render(<Count name="张三"/>,document.getElementById("container"))


</script>